<template>
  <div>
    <div class="block">
      <span class="demonstration">选择城市：</span>
      <el-cascader :options="cityOption" v-model="selectedOptions1" @change="handleChange" filterable changeOnSelect></el-cascader>
      <span class="demonstration">选择类型：</span>
      <el-cascader :options="styleOption" v-model="selectedOptions2" @change="handleChange" filterable changeOnSelect></el-cascader>
      <el-button type="primary" @click="onSearch">查询</el-button>
    </div>
    <div id="pie" style="max-width:900px; height: 350px; margin-top: 10px"></div>
  </div>
</template>

<script>
  import {cityOptions1} from '../apis/cities'
  import {styleOptions1} from '../apis/houseStyleOptions'
  import {getAvgPrice} from '../apis/api'
  import echarts from 'echarts/dist/echarts'
  export default {
    data () {
      return {
        cityOption: cityOptions1,
        styleOption: styleOptions1,
        selectedOptions1: [],
        selectedOptions2: []
      }
    },
    methods: {
      onSearch () {
        getAvgPrice(JSON.stringify(this.selectedOptions1), JSON.stringify(this.selectedOptions2)).then(res => {
          let datas = JSON.parse(res.data)
          let xdata = []
          let seriesdata = []
          for (let key in datas) {
            xdata.push(key)
            seriesdata.push({value: datas[key], name: key})
          }
          let label = ''
          for (let i = 0; i < this.cityOption.length; i++) {
            if (this.selectedOptions1.length === 1) {
              if (this.cityOption[i].value === this.selectedOptions1[0]) {
                label = this.cityOption[i].label + '（各市/直辖市各区）的出租房价均值'
              }
            } else {
              if (this.cityOption[i].value === this.selectedOptions1[0]) {
                for (let c = 0; c < this.cityOption[i].children.length; c++) {
                  if (this.cityOption[i].children[c].value === this.selectedOptions1[1]) {
                    label = this.cityOption[i].children[c].label + '各区县的出租房价均值'
                  }
                }
              }
            }
          }
          let chart = echarts.init(document.getElementById('pie'))
          let option = {
            title: {
              text: label,
              subtext: '单位：元 或 万元',
              x: 'center'
            },
            tooltip: {
              trigger: 'axis',
              formatter: '{a} <br/>{b} : {c} (元/万元)'
            },
            toolbox: {
              show: true,
              feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: xdata,
                axisLine: {
                  lineStyle: {
                    color: 'rgb(0, 138, 205)',
                    width: 2
                  }
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                axisLabel: {
                  formatter: '{value}'
                },
                name: '平均价格',
                axisLine: {
                  lineStyle: {
                    color: 'rgb(0, 138, 205)',
                    width: 2
                  }
                }
              }
            ],
            series: [
              {
                name: '平均价格',
                type: 'line',
                data: seriesdata,
                lineStyle: {
                  normal: {
                    color: 'rgb(197, 181, 229)'
                  }
                }
              }
            ]
          }
          chart.setOption(option)
        }, res => {
          alert(res)
        })
      },
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>
